<div class="container index" (click) ="formActive = false">
  <div class="row">
    <div class="col-xs-16 main">
      <div id="demo" class="carousel slide" data-ride="carousel">
        <!-- 指示符 -->
        <ul class="carousel-indicators">
          <li data-target="#demo" data-slide-to="0" class="active"></li>
          <li data-target="#demo" data-slide-to="1"></li>
          <li data-target="#demo" data-slide-to="2"></li>
        </ul>

        <!-- 轮播图片 -->
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg" style="width:100%;height: 230px;" />
          </div>
          <div class="carousel-item">
            <img src="https://static.runoob.com/images/mix/img_nature_wide.jpg" style="width:100%;height: 230px;" />
          </div>
          <div class="carousel-item">
            <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg" style="width:100%;height: 230px;" />
          </div>
        </div>

        <!-- 左右切换按钮 -->
        <a class="carousel-control-prev" href="#demo" data-slide="prev">
          <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#demo" data-slide="next">
          <span class="carousel-control-next-icon"></span>
        </a>
      </div>
      <div class="split-line"></div>
      <!-- <div class="list-group">
          <div  class="item_z" style="border-top: 1px solid rgba(0, 0, 0, 0.125);
          ">
            <a href="#">代码片段</a>
            <p>可以将一些代码元素放到 code 元素里面:</p>
            <p>以下 HTML 元素: <code>span</code>, <code>section</code>, 和 <code>div</code> 用于定义部分文档内容。</p>
          </div>
          <a href="#" class="item_z list-group-item-action">
            <h1>代码片段</h1>
            <p>可以将一些代码元素放到 code 元素里面:</p>
            <p>以下 HTML 元素: <code>span</code>, <code>section</code>, 和 <code>div</code> 用于定义部分文档内容。</p>
          </a>
          <a href="#" class="item_z list-group-item-action">
            <h1>代码片段</h1>
            <p>可以将一些代码元素放到 code 元素里面:</p>
            <p>以下 HTML 元素: <code>span</code>, <code>section</code>, 和 <code>div</code> 用于定义部分文档内容。</p>
          </a>
        </div> -->
      <div id="list-container">
        <!-- 文章列表模块 -->
        <ul class="note-list" infinite-scroll-url="/">
          <li id="note-40737279" data-note-id="40737279" class="have-img li-font">
            <a class="wrap-img" href="/p/f0483b0d15bf" target="_blank">
              <img class="img-blur-done"
                src="//upload-images.jianshu.io/upload_images/1202579-80ec8c5ac1046cc9?imageMogr2/auto-orient/strip|imageView2/1/w/360/h/240"
                alt="120" />
            </a>
            <div class="content">
              <a class="title" target="_blank" href="/p/f0483b0d15bf" style="color:#333;">朋友圈里的“伪洒脱”，正在毁掉中国年轻人</a>
              <p class="abstract">
                01 过去的一年里，你过得还好吗？
                有多少人是在朋友圈一边晒着幸福，一边过得猫狗不如？
                淘宝曾经公布了年终盘点TOP40的宝贝，Ins拍照道具入...
              </p>
              <div class="meta">
                <span class="jsd-meta">
                  <i class="fa fa-diamond" aria-hidden="true"></i>52.8
                </span>
                <a class="nickname" target="_blank" href="/u/68a0eaed7f38">精读君</a>
                <a target="_blank" href="/p/f0483b0d15bf#comments">
                  <i class="fa fa-comments" aria-hidden="true"></i> 49
                </a>
                <span>
                  <i class="fa fa-thumbs-up" aria-hidden="true"></i> 714
                </span>
                <span><i class="iconfont ic-list-money"></i> 1</span>
              </div>
            </div>
          </li>
        </ul>
        <!-- 文章列表模块 -->
      </div>
    </div>

    <div class="col-xs-7 col-xs-offset-1 aside">
      <div class="board">
        <a target="_blank" href="/mobile/club"><img
            src="//cdn2.jianshu.io/assets/web/banner-s-club-aa8bdf19f8cf729a759da42e4a96f366.png" alt="Banner s club"
            style="width:100%;" /></a>
        <a target="_blank" href="/trending/weekly?utm_medium=index-banner-s&amp;utm_source=desktop"><img
            src="//cdn2.jianshu.io/assets/web/banner-s-3-ddcc844ebdd8edca2d93b7ea5a8de79e.png" alt="Banner s 3"
            style="width:100%;" /></a>
        <a target="_blank" href="/trending/monthly?utm_medium=index-banner-s&amp;utm_source=desktop"><img
            src="//cdn2.jianshu.io/assets/web/banner-s-4-b70da70d679593510ac93a172dfbaeaa.png" alt="Banner s 4"
            style="width:100%;" /></a>
        <a utm_medium="index-banner-s" target="_blank" href="/mobile/books?category_id=284"><img
            src="//cdn2.jianshu.io/assets/web/banner-s-7-1a0222c91694a1f38e610be4bf9669be.png" alt="Banner s 7"
            style="width:100%;" /></a>
        <a utm_medium="index-banner-s" target="_blank" href="/publications"><img
            src="//cdn2.jianshu.io/assets/web/banner-s-5-4ba25cf5041931a0ed2062828b4064cb.png" alt="Banner s 5"
            style="width:100%;" /></a>
        <a target="_blank" href="/c/e048f1a72e3d?utm_medium=index-banner-s&amp;utm_source=desktop"><img
            src="//cdn2.jianshu.io/assets/web/banner-s-6-c4d6335bfd688f2ca1115b42b04c28a7.png" alt="Banner s 6"
            style="width:100%;" /></a>
      </div>
    </div>
    <!-- 推荐作者 -->
  </div>
</div>
